<template>
  <div class="CommForm">
    <!-- <button @click="submit(originData)">submit</button> -->
    <div class="CommForm-rows">
      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="140px"
      >
        <el-row
          v-for="(rows, i) in myForm.headers"
          :key="i"
          class="CommForm-row"
          :gutter="20"
        >
          <template
            v-for="(item, index) in rows"
          >
            <el-col
              v-if="item.display === 1"
              :key="index"
              :span="item.width > 24 ? 6 : item.width"
            >
              <el-form-item
                :props="item.dataIndex"
                :required="item.isRequired === 1"
              >
                <template #label>
                  <span>
                    <span>{{ item.title }}</span>
                    <el-tooltip v-if="item.remark">
                      <template #content>
                        <div class="tooltip_content">
                          {{ item.remark }}
                        </div>
                      </template>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </span>
                </template>
                <!-- 输入框 -->
                <el-input
                  v-if="item.componentType === 'input' && getFlag"
                  ref="innerOper"
                  v-model="item.myValue"
                  :placeholder="item.promptText || '请输入'"
                  :class="{'myEllipsis': item.ellipsis === 1}"
                  :disabled="item.edit === 0"
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  :title="item.myValue"
                  :type="item.isNumber === 1 ? 'number' : 'text'"
                  @mousewheel.native.prevent
                  @input="v => itemEditMark(item, v)"
                  @change="v => inputChange(item,v)"
                />
                <!-- 单选框 -->
                <el-radio-group
                  v-if="item.componentType === 'radio' && getFlag"
                  v-model="item.myValue"
                  :disabled="item.edit === 0"
                  @change="v=>itemEditMark(item,v)"
                >
                  <!-- 报表显示什么就是什么,等最后再转 -->
                  <!-- <el-radio
                    v-for="radio in item.columnSelectOptions"
                    :key="radio[item.selectViewOptions.renderMapKey]"
                    :label="radio[item.selectViewOptions.renderValue]"
                  >{{ radio[item.selectViewOptions.renderValue] }}
                  </el-radio> -->
                  <el-radio
                    v-for="radio in item.columnSelectOptions"
                    :key="radio[item.selectViewOptions.renderMapKey]"
                    :label="radio[item.selectViewOptions.renderKey]"
                  >{{ radio[item.selectViewOptions.renderValue] }}
                  </el-radio>
                </el-radio-group>
                <!-- 时间选择器 -->
                <Time-Picker
                  v-if="dataPicker(item) && getFlag"
                  v-model="item.myValue"
                  :type="dataPicker(item).type"
                  :placeholder="item.promptText || '请选择'"
                  :disabled="item.edit === 0"
                  :value-format="dataPicker(item).format"
                  :personal-style="{
                    currentBorderRadius: '6px',
                    fontColor: '#313131'
                  }"
                  @change="v => changeItemPickerValue(item, v)"
                />
                <!-- <el-date-picker
                  v-if="dataPicker(item) && getFlag"
                  ref="innerOper"
                  v-model="item.myValue"
                  :title="item.myValue"
                  :class="{'myEllipsis': item.ellipsis === 1}"
                  :type="dataPicker(item).type"
                  :disabled="item.edit === 0"
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  :value-format="dataPicker(item).format"
                  @change="v => itemEditMark(item, v)"
                /> -->

                <!-- 下拉框 -->
                <Select-Url
                  v-if="['select', 'enterpriseIn', 'enterpriseList'].includes(item.componentType) && getFlag"
                  ref="selectUrl"
                  :title="item.myValue"
                  :class="{'myEllipsis': item.ellipsis === 1}"
                  :placeholder="item.promptText || '请选择'"
                  :item="item"
                  :disabled="item.edit === 0"
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  :select-value="item.myValue"
                  @change="(v) => selChange(v, item)"
                  @changeItemOption="changeItemOption"
                />

                <!-- 树状下拉 -->
                <SelectTree
                  v-if="['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(item.componentType) && getFlag"
                  :item="item"
                  :disabled="item.edit === 0"
                  :placeholder="item.promptText || '请选择'"
                  :select-value="item.myValue"
                  :class="{'myEllipsis': item.ellipsis === 1}"
                  @changeData="selectTreeChange"
                />

                <!-- 输入&下拉 -->
                <transition
                  v-if="item.componentType === 'toggleInputSelect' && getFlag"
                  mode="out-in"
                  name="toggleIS"
                >
                  {{ item.myToggleFlag }}
                  <el-input
                    v-if="item.myToggleFlag"
                    ref="innerOper"
                    v-model="item.myValue"
                    :placeholder="item.promptText || '请输入'"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    :disabled="item.edit === 0"
                    style="width: 100%;height: 100%;"
                    :data-dataIndex="item.dataIndex"
                    :title="item.myValue"
                    :type="item.isNumber === 1 ? 'number' : 'text'"
                    @mousewheel.native.prevent
                    @input="v => itemEditMark(item, v)"
                    @change="v => inputChange(item,v)"
                  >
                    <template #prefix>
                      <div class="prefix_icon" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg" />
                        <div>切换</div>
                        <div>选择</div>
                      </div>
                    </template>
                  </el-input>

                  <Select-Url
                    v-else
                    ref="selectUrl"
                    :title="item.myValue"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    :placeholder="item.promptText || '请选择'"
                    :item="item"
                    :disabled="item.edit === 0"
                    style="width: 100%;height: 100%;"
                    :data-dataIndex="item.dataIndex"
                    :select-value="item.myValue"
                    @change="(v) => selChange(v, item)"
                    @changeItemOption="changeItemOption"
                    @toggleChangeComponent="toggleFlag"
                  >
                    <template #prefix>
                      <div class="prefix_icon" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg" />
                        <div>切换</div>
                        <div>输入</div>
                      </div>
                    </template>
                  </Select-Url>
                </transition>

                <div v-if="item.componentType === 'text' || !getFlag" class="CommForm-showValue">
                  <span v-if="item.myValue">
                    {{ item.myValue }}
                  </span>
                  <span v-else class="CommForm-showValue-unknow">
                    暂未填写
                  </span>
                </div>
              </el-form-item>
            </el-col>
          </template>

        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import SelectUrl from '@/components/CommonForm/components/SelectUrl';
import SelectTree from '@/components/CommonForm/components/SelectTree';
import TimePicker from '@/components/CommonForm/components/TimePicker';
import { digitUppercase } from '@/utils/utils';
import { getCommonData } from '@/api/reportCenter';
import { isValueFilled, linkForReport, findFather } from './common';
import emitter, { HEADER_CROSS } from '@/utils/eventBus.js';

/*
  myLink: {
    focusUrlParamsForOther: [] //某些item.focusUrlParams.other, 这里的focusUrlParamsForOther是收集某个item被多少个other关联了
  }
*/
const myMap = new WeakMap();
// 获取某个item底下的依赖项
const getMyMapItem = function(targetKey) {
  let myLink = myMap.get(targetKey);
  if (!myLink) {
    myLink = new Map();
    myMap.set(targetKey, myLink);
  }
  return myLink;
};

const collectDep = function(item, key, value) {
  const link = getMyMapItem(item);
  const cValue = link.get(key);
  if (cValue) {
    link.set(key, [...cValue, value]);
  } else {
    link.set(key, [value]);
  }
};
/*
    item: {
      componentType （'input'|'select'|'treeSelect'|'dateSelect'|'dialog'）
      isUrlSpecial  url是否是特殊情况（0:不是 1:是）
      edit    是否可编辑(1:是/0:否)
      display  是否显示(0:隐藏 1：显示)
      selectViewOptions	 {     renderKey: 'economySectionText'--传给后端,     renderValue: 'economySectionText'---前端显示,     renderMapKey: 'economySectionCode' }
      width
      isRequired  是否必填（0：否，1：是）
   }

*/
export default {
  name: 'CommonForm',

  components: { SelectUrl, SelectTree, TimePicker },

  props: {
    tableId: {
      type: Number,
      default: -1
    },

    flag: {
      type: String,
      default: '1'
    },

    didDeep: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      counter: 0,
      myForm: {
        headers: [] // 渲染数据
      },

      formRules: {},

      formData: { }, // form表单数据
      originData: {} // 原始数据 (注意他们几个的引用数据源相同 myForm、formData、 originData)
    };
  },

  computed: {
    form() {
      return this.form;
    },

    // 从头部获取的数据（浩哥那边）
    haoForm() {
      const getForm = this.getForm;
      if (getForm) {
        return getForm();
      } else {
        return [];
      }
    },

    getFlag() {
      return ['0', '2'].includes(this.flag);
      // if (['0', '2'].includes(this.flag)) {
      //   return true;
      // } else {
      //   return false;
      // }
    }
  },

  created() {
    emitter.on(HEADER_CROSS, e => {
      const [item] = e;
      const {
        componentType
      } = item;
      // 下拉框
      const typeSelect = ['select', 'enterpriseIn', 'enterpriseList'].includes(componentType);
      // 树下拉
      const typeTreeSelect = ['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(componentType);

      const selectedItem = item.treeSelectItem || item.selected;
      if (typeSelect) {
        this.selChange(selectedItem, item);
      } else if (typeTreeSelect) {
        this.selectTreeChange({
          data: selectedItem,
          item
        });
      } else {
        this.inputChange(item, item.myValue);
      }
    });
  },

  provide() {
    return {
      formData: () => this.formData
    };
  },

  inject: {
    form: {
      from: 'form',
      default: () => ({})
    },

    getForm: {
      from: 'getForm',
      default: () => {}
    }
  },

  methods: {
    toggleFlag(item) {
      this.$set(item, 'myToggleFlag', !item.myToggleFlag);
      this.$forceUpdate();
    },

    changeItemOption(payload) {
      const { item, option } = payload;
      item.opintion = option;
      // item.opintion = option;
    },

    // 时间选择器类型
    dataPicker(item) {
      const { componentType } = item;
      const typesMap = {
        'yearDateSelect': {
          format: 'yyyy',
          type: 'year'
        },
        'monthDateSelect': {
          format: 'yyyy-MM',
          type: 'month'
        },
        'dayDateSelect': {
          format: 'yyyy-MM-dd',
          type: 'date'
        }
      };
      if (componentType in typesMap) {
        return typesMap[componentType];
      } else {
        return false;
      }
    },

    // 普通下拉框选中
    selChange(v, item) {
      item.itemSelected = v;
      // item.myValue = v[item.selectViewOptions.renderValue];
      item.myValue = v[item.selectViewOptions.renderKey];
      try {
        // 联动
        this.linkItemFields(item, v);

        this.itemEditMark(item, v);
      } catch (error) {
        console.error(error);
      }

      // this.setInnerValue('implementationPlan', 'cqc');
    },

    // 收集依赖获取接口数据
    getRequestDataFormServer(item) {
      const mapItem = getMyMapItem(item);
      const focusUrlParamsForOther = mapItem.get('focusUrlParamsForOther');
      if (focusUrlParamsForOther) {
        focusUrlParamsForOther.map(other => {
          // 需要让depends全部有值才能请求接口获取数据
          const depends = getMyMapItem(other).get('focusUrlDepends');
          if (depends) {
            const flag = depends.every(depend => {
              const value = depend.myValue;
              return value || value === 0;
            });

            // 全部有值， 开始请求
            if (flag) {
              const {
                dataIndex
              } = other;
              this.linkInterfaceRequestByKey(dataIndex);
              /*
              const linkItem = this.formData[dataIndex];
              if (linkItem) {
                this.linkExcuteFunction(linkItem);
              }
               */
            }
          }/*  */
        });
      }
    },

    // 请求excute function接口(为了配合他们的配置（无用代码）)
    linkExcuteFunction(item) {
      const { focusUrlParams, focusUrl, selectViewOptions } = item;
      const {
        type,
        other,
        data,
        method
      } = focusUrlParams;
      const additionRequest = [];

      if (other && typeof other === 'object') {
        Object.keys(other).map(key => {
          const data = this.formData[key];
          const linkItem = other[key];
          additionRequest.push({
            ...linkItem,
            value: data.myValue
          });
        });
      }
      const requestData = {
        ...data
      };
      if (type === 0) {
        requestData.paramList = additionRequest;
      } else if (type === 1) {
        requestData.filterList = additionRequest;
      }

      const endData = {
        data: requestData,
        method
      };

      item.myValue = '';
      getCommonData(endData, focusUrl).then(({ data: res }) => {
        if (res.success) {
          if (type === 0) {
            // item.myValue = res.data[selectViewOptions.renderValue];
            item.myValue = res.data[selectViewOptions.renderKey];
            // const link = getMyMapItem(item);
            // const linkDepOthers = link.get('focusUrlParamsForOther');
            // this.linkItemFields(item, item.myValue);
          } else if (type === 1) {
            if (typeof res.data === 'string') {
              item.opintion = [];
            } else {
              item.opintion = res.data;
            }
          }
        }
      });
    },

    // 联动赋值
    assignItemValue(linkageField, value, obj) {
      const { key, value: valueKey, tableId, type } = linkageField;
      if (tableId && tableId !== this.tableId) { // 跨表
        linkForReport(linkageField, value, obj);
      } else if (valueKey && Object.prototype.toString.call(value) === '[object Object]') {
        if (key in this.formData) {
          const item = this.formData[key];
          if (item.componentType === 'select' && linkageField.splitArray) { // 额外需要字段判断
            this.itemEditMark(item);
            const arrOption = value[valueKey].split(',');
            const arr = [];
            arrOption.forEach(item => {
              arr.push({
                lable: item,
                value: item
              });
            });
            item.opintion = arr;
            if (arr.length === 1) {
              item.myValue = value[valueKey];
            } else {
              item.myValue = '';
            }
          } else {
            item.myValue = value[valueKey];
            item.editMark = true;
          }

          try {
            this.linkItemFields(item, value[valueKey]); // value | value[valueKey] 之后再试试吧
          } catch (error) {
            console.warn(error);
          }
        }
      } else { // 没有value
        this.linkInterfaceRequestByKey(key, value, type);
      }

      if (!tableId || tableId === this.originData.tableId) {
        const item = this.formData[linkageField.key];
        if (item) {
          this.getRequestDataFormServer(item);
        }
      }
    },

    linkItemFields(item, value) {
      // const { title, linkageFields } = item;
      const { linkageFields } = item;

      const link = getMyMapItem(item);
      // DEPARTMENTNAME
      // console.log(item.title, '--------', item, value);
      const linkDepOthers = link.get('focusUrlParamsForOther');
      if (linkDepOthers) {
        // ? 当item focusUrlParams other内所依赖的key发生变化时候， 清空item的myValue
        linkDepOthers.forEach(item1 => {
          item1.myValue = '';
        });
      }

      if (value) {
        if (linkageFields) {
          linkageFields.map(link => {
            if (link.key === 'STARUS') {
              console.log(item);
            }
            if (link.level) {
              const father = findFather(value, link.level * 1);
              if (father) {
                this.assignItemValue(link, father, item);
              }
            } else {
              this.assignItemValue(link, value, item);
            }
          });
        }
      }
    },

    // 字段数据源配置由另一个打dataIndex动态赋值
    linkInterfaceRequestByKey(key, value, fieLdType) {
      const linkItem = this.formData[key];
      if (!linkItem || !(linkItem && Object.keys(linkItem).length)) {
        // this.$message.warning('没有在此表单内匹配到dataIndex为' + key + '的字段');
        return;
      }
      if (fieLdType === 'toUpperCase') {
        linkItem.myValue = digitUppercase(value * 1);
      } else {
        const { focusUrlParams, focusUrl, selectViewOptions } = linkItem;
        const {
          type,
          other,
          data,
          method
        } = focusUrlParams;

        if (value === '') {
          linkItem.opintion = [];
          linkItem.myValue = '';
        } else {
          linkItem.myValue = value; // ? 这里可能有问题能(這個else)
        }

        if (other) {
          let flag = true;
          let additionRequest = null;
          if ([0, 1].includes(type)) {
            additionRequest = [];
          } else if (type === 1) {
            additionRequest = [];
          }

          if (!additionRequest) { // 没有在接口属性内设置type
            this.$message(linkItem.title + '没有在接口属性内设置type或设置错误(0|1)');
            return;
          }
          for (const key in other) {
            const data = this.formData[key];
            let value = data.myValue;
            if (flag) {
              flag = isValueFilled(value);
            }

            const typeEventMap = {
              0: additionRequest => {
                const linkItem = other[key];
                additionRequest.push({
                  ...linkItem,
                  value: value
                });
                // additionRequest[key] = value;
              },

              1: additionRequest => {
                const otherKey = other[key];
                if (otherKey.value) {
                  value = data.itemSelected[otherKey.value];
                }

                // additionRequest[key] = value;

                additionRequest.push({
                  col: key,
                  value
                });
              }
            };

            typeEventMap[type](additionRequest);
          }

          if (flag) { // 全部有值
            const requestData = {
              ...data
            };
            if (type === 0) {
              requestData.paramList = additionRequest;
              // Object.assign(requestData, additionRequest);
            } else if (type === 1) {
              requestData.filterList = additionRequest;
            }
            const endData = {
              data: requestData,
              method
            };
            linkItem.myValue = '';

            getCommonData(endData, focusUrl).then(({ data: res }) => {
              if (res.success) {
                if (type === 0) {
                  // linkItem.myValue = res.data[selectViewOptions.renderValue];
                  linkItem.myValue = res.data[selectViewOptions.renderKey];
                  this.linkItemFields(linkItem, linkItem.myValue);
                } else if (type === 1) {
                  if (typeof res.data === 'string') {
                    linkItem.opintion = [];
                  } else {
                    linkItem.opintion = res.data;
                  }
                }
              } else {
                linkItem.opintion = [];
              }
            });
          }
        }
      }
    },

    // 树型下拉框选中
    selectTreeChange({ data, item }) {
      item.treeSelectItem = data;
      item.itemSelected = data; // 统一选择字段
      // 显示什么绑定什么,等提交再转换
      // item.myValue = data[item.selectViewOptions.renderValue];
      item.myValue = data[item.selectViewOptions.renderKey];
      this.linkItemFields(item, data);
      this.itemEditMark(item, data);
    },

    // 赋值普通下拉框
    // setSelectValue(key, value = {}) {
    //   /*
    //       key: dataIndex,
    //       value: {
    //         value: {},  // 要赋的值
    //         opintion: []  // 选择列表
    //       }
    //   */
    //   this.$refs.selectUrl.forEach(ele => {
    //     const dataIndex = ele.$el.dataset.dataindex;
    //     if (key === dataIndex) {
    //       ele.setSelectItem(value);
    //     }
    //   });
    // },

    // 赋值输入框、时间选择器
    setInnerValue(key, value) {
      if (key in this.formData) {
        this.formData[key].myValue = value;
      }
    },

    // return  { 行数: 这一行数据的数组, ... }
    headerMap(data) {
      const map = new Map();
      this.originData = data;
      data.headers.sort((curr, next) => {
        return curr.rowNum * 1 - next.rowNum * 1;
      });
      data.headers.map(item => {
        const rowNum = item.rowNum;
        if (map.has(rowNum)) {
          if (map.get(rowNum)) {
            map.set(rowNum, [...map.get(rowNum), item]);
          }
        } else {
          map.set(rowNum, [item]);
        }
      });
      return map;
    },

    // 每行根据orderid排序
    headers(data) {
      let arrData = [...data.values()];
      arrData.forEach(arr => {
        arr.sort((prev, curr) => prev.orderId - curr.orderId);
      });

      if (this.didDeep) {
        arrData = this.deepHeaderData(arrData);
      }
      return arrData;
    },

    deepHeaderData(arr, res = []) {
      if (Array.isArray(arr)) {
        arr.forEach(item => {
          return this.deepHeaderData(item, res);
        });
      } else {
        if (arr.children) {
          return this.deepHeaderData(arr.children, res);
        }
        res.push(arr);
      }

      return [res];
    },

    // 获取由本表单每个item组成的object { [item.dataIndex]: item, ... }
    getFormDatas(arr) {
      const obj = { };
      arr.flat(2).map(item => {
        if (!this.didDeep) {
          obj[item.dataIndex] = item;
        }
      });

      // 有 提交|暂存 那个页面的头部数据(需要头部联动表单， 所以直接在这里收集头部数据)
      this.haoForm.map(o => {
        o.myValue = o.value;
        obj[o.dataIndex] = o;
      });

      return obj;
    },

    // 处理子项
    dealItem(data, body) {
      for (const key in data) {
        const item = data[key];
        const {
          focusUrlParams,
          defaultValue,
          componentType,
          focusUrl,
          isUpper
        } = item;

        item.myToggleFlag = false;

        if (defaultValue) {
          const valueNumber = Number(defaultValue);
          const flag = !isNaN(valueNumber);
          if (flag) { // 是数字
            item.myValue = valueNumber;
          } else {
            item.myValue = defaultValue;
          }
        }

        if (focusUrlParams) {
          const {
            other
          } = focusUrlParams;
          if (other) {
            Object.keys(other).forEach(otherKey => {
              const otherItem = data[otherKey];
              if (otherItem) {
                collectDep(otherItem, 'focusUrlParamsForOther', item);
                collectDep(item, 'focusUrlDepends', otherItem);
              }
            });
          }
        }

        if (componentType === 'select') {
          if (!focusUrl) {
            item.opintion = item.columnSelectOptions;
          }
        }

        // 大写
        if (isUpper) {
          const linkFieItem = data[item.upperField];
          if (linkFieItem) {
            const upperField = item.upperField;
            if (linkFieItem.isNumber !== 1) {
              this.$message.warning(`${item.title}关联的大写字段${upperField}, 必须要是数字类型`);
            } else {
              linkFieItem.linkageFields.push({
                key: item.dataIndex,
                value: '',
                type: 'toUpperCase'
              });
            }
          } else {
            this.$message.warning(`没有匹配到${item.title}关联的大写字段${item.upperField}`);
          }
        }

        if (body.hasOwnProperty(key)) {
          item.myValue = body[key];
        }
      }
    },

    // 初始化数据
    initData() {
      // 是否重复执行
      if (this.counter++ && !this.didDeep) {
        return;
      }

      const data = this.form()[this.tableId];
      const body = data.bodys[0] || {};
      const map = this.headerMap(data);
      this.myForm.headers = this.headers(map);
      this.formData = this.getFormDatas(this.myForm.headers);

      this.dealItem(this.formData, body);

      this.haoForm.map(o => {
        this.linkItemFields(o, o.myValue);
      });
    },

    changeItemPickerValue(item, v) {
      this.itemEditMark(item, v);
      this.linkItemFields(item, v);
    },

    // 标记被编辑过
    itemEditMark(item) {
      item.editMark = true;
      // item.myValue = v;
    },

    inputChange(item, v) {
      // 联动
      if (item.upperField) {
        // 联动金额大写
        if (item.isUpper + '' === '1') {
          this.setInnerValue(item.upperField, digitUppercase(v));
        } else {
          this.setInnerValue(item.upperField, v);
        }
      }

      this.linkItemFields(item, v);
      this.getRequestDataFormServer(item);
    },

    formInstance() {
      return this.$refs.form;
    },

    // 重置状态（表格报错）
    resetFormStatus() {
      this.formInstance().resetFields();
    },

    submit() {
      return this.formInstance().validate;
    },

    // 置空
    resetDataEmpty() {
      const data = this.formData;
      for (const key in data) {
        data[key].myValue = '';
      }

      this.resetFormStatus();
    }

  }

};
</script>

<style lang="scss" scoped>
.CommForm {
  width: 100%;
  height: 100%;
  overflow: auto;
  .CommForm-rows {
    padding: 0 24px;
    /deep/ .el-col {
      height: 31px;
      margin-bottom: 12px;
      .el-input__inner {
        height: 100% !important;
        min-height: 30px;
      }
    }
  }

  .CommForm-showValue {
    width: 100%;
    height: 100%;
    position: relative;

    .CommForm-showValue-unknow {
      color: #E6E9F0;
    }
    > span {
      display: block;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;

      &:hover {
        overflow: initial;
        text-overflow: initial;
        position: absolute;
      }

      &::after {
        content: '';
        display: grid;
        width: 100%;
        border-bottom: 1px solid #E6E9F0;
        position: relative;
        top: -5px;
      }
    }
  }
}

  .toggleIS-enter-active {
    animation: animate__bounce .6s ease reverse;
  }

  .toggleIS-leave-active {
    animation: animate__bounce .6s ease reverse;
  }

  .toggleIS-enter-from,
  .toggleIS-leave-to {
    opacity: 0;
  }

  .toggleIS-enter-active,
  .toggleIS-leave-active {
    transition: opacity .5s ease;
  }

@media only screen and (min-width: 1920px) {
.CommForm {
  .CommForm-rows {
    /deep/ .el-col {
      margin-bottom: 25px;
      .el-input__inner {
        height: 100% !important;
        min-height: 35px;
      }
    }
  }

}
}

  /deep/ .el-form-item {
      .el-form-item__label {
        font-weight: normal;
      }
    }

.myEllipsis /deep/ input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip_content {
  max-width: 250px;
  word-break: break-all;
  word-wrap: break-word;
}
.prefix_icon {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // overflow: hidden;

  > div {
    height: 33%;
    position: relative;
    top: -5px;
    color: #fff;
    // position: absolute;
  }
    .prefix_icon_bg {
      height: 25px;
      width: 30px;
      position: absolute;
      background-color: #1492FF;
      top: 8px;
      border-radius: 2px;
    }
}
</style>
